import QtQuick 2.15
Item {
    id:root
    implicitWidth: 220//(parent.width-40)/3
    implicitHeight: 200+cur

    property int cur:4
    property string str
    property color bgColor:"#1F1f1f"
    property int   numberAnimation_timer: 4
    //property alias bgOpacity: bg.opacity

    RecItem{
        id: upItem
        cur:root.cur
        width: parent.width
        height: (parent.height-cur)/2
    }
    RecItem{
        id:downItem
        cur:root.cur
        anchors.bottom: parent.bottom
        width: parent.width
        height: (parent.height-cur)/2
        rotation: 180
        flag : true
    }

    Flipable {
        id:flipable
        width: parent.width
        height: (parent.height-cur)/2
        back:RecItem{
            id:backItem
            cur:root.cur
            anchors.fill: parent
            rotation: 180
            flag : true
            //visible: false
        }
        front:RecItem{
            id:fontItem
            cur:root.cur
            anchors.fill: parent
        }
        transform: Rotation {
            id: rotation
            origin.x: 0  // X 轴中心点（水平居中）
            origin.y: height/2     // Y 轴底部（关键！）
            axis { x: 1; y: 0; z: 0 }  // 绕 X 轴旋转
            angle: 0  // 初始角度
        }


            NumberAnimation {
                id: rotateAnim1
                target: rotation
                property: "angle"
                from: 0
                to: -180 // 负值表示逆时针
                duration: 900//numberAnimation_timer
                easing.type: Easing.OutCirc
                onStopped: {
                    downItem.str = root.str
                    fontItem.str = root.str
                    flipable.visible = false
                    rotation.angle=0
                }
            }
    }


    onStrChanged:{
        flipable.visible=true
        upItem.str = root.str
        backItem.str = root.str
        rotateAnim1.start()
    }
}
